<template>
	<view class="content">
		v-mode-push-array:
		<input type="text" v-model="nextVal" class="input"  value=""/>
		<button type="default" @click='add'>add</button>
		<view class="content">
			<view v-for="(item,index) in addData" :key="index">
				{{item}}
			</view>
		</view>
		v-mode:
		<input type="text" v-model="viewData2" style="background-color: #f0f8ff" />
		<view class="item">
			{{ viewData2 }}
		</view>
		v-for:
		<view class="item" v-for="(item, index) in list" :key="index">
			index: {{ index }}, value: {{ item }}
		</view>

		v-if, v-else:
		<view class="" v-if="show">if</view>
		<view class="" v-else>else</view>

		v-if:
		<view class="" v-if="show">v-if显示</view>
		<button type="default" @click="ifShow">v-if on/off</button>

		style demo:
		<view class="viewClass1" :style="styleDataVar">style demo</view>
		logo:
		<image class="logo" src="/static/logo.png"></image>
		<p>模板方法</p>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		v-text和v-html
		<view class="content" v-text="viewData"> </view>
		<view class="content" v-html="viewData"> </view>
		<text>{{ viewData }}</text>
		<view class="" style="background-color: black; width: 375rpx; color: white">
			he
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nextVal: '',
				styleDataVar: "background-color: red; font-size: 32px",
				title: "Hello",
				// viewData: 'hello world'
				viewData: "<p>hello world</p>",
				viewData2: '1',
				show: true,
				list: [1, 2, 3, 4, 5],
				addData: ['tom', 'alison'],
			};
		},
		onLoad() {},
		methods: {
			ifShow() {
				this.show = !this.show;
			},
			add(){
				this.addData.push(this.nextVal)
			}
		},
		beforeCreate() {
			
		},
		created() {
			
		},
		beforeMount() {
			
		},
		mounted() {
			
		},
		beforeUpdate() {
			
		},
		updated() {
			
		},
		beforeDestroy() {
			
		},
		destroyed() {
			
		}
	};
</script>

<style>
	.viewClass1 {
		background-color: #8f8f94;
		color: aliceblue;
	}
	.input{
		background-color: aliceblue;
		color: red;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>